<template>
  <ToolboxWindow :show="status.showMainWindow" @close="handleClose" :width="480">
    <template #title>
      <h4 style="display:flex;align-items:center">
        <el-icon>
          <Timer />
        </el-icon>
        <span style="padding-left:8px">计时器</span>
      </h4>
    </template>
    <div class="timer-container">
      <div class="timer-config" v-if="showConfig">
        <el-text>设置倒计时时长：</el-text>
        <div class="timer-config-form">
          <el-select v-model="configContent.hours" placeholder="Select" size="large" style="width: 80px">
            <el-option v-for="item in [...Array(24).keys()]" :key="item" :label="item + ' 时'" :value="item" />
          </el-select>
          <el-select v-model="configContent.minutes" placeholder="Select" size="large" style="width: 80px">
            <el-option v-for="item in [...Array(60).keys()]" :key="item" :label="item + ' 分'" :value="item" />
          </el-select>
          <el-select v-model="configContent.seconds" placeholder="Select" size="large" style="width: 80px">
            <el-option v-for="item in [...Array(60).keys()]" :key="item" :label="item + ' 秒'" :value="item" />
          </el-select>
          <el-button class="timer-button" type="primary" @click="handleSave" size="large"
            :disabled="configContent.hours + configContent.minutes + configContent.seconds == 0">
            <el-icon>
              <CircleCheckFilled />
            </el-icon>
            <!-- <span>Save</span> -->
          </el-button>
        </div>
      </div>
      <div class="timer-main" v-else>
        <div :class="['timer-main-text', status.currentDuration == 0 ? 'vibrate-fast-hard finished' : '']">
          {{ duration }}
          <!-- <span>{{ duration.hours }}:{{ duration.minutes }}:{{ duration.seconds }}</span> -->
          <!-- <span style="font-size:0.75em">:{{ duration.milliseconds }}</span> -->
        </div>
        <div>
          <el-button class="timer-button" type="primary" size="large" :text="status.currentDuration == 0"
            @click="handleStart" :disabled="status.timerID != 0 || status.currentDuration == 0">
            <el-icon>
              <VideoPlay />
            </el-icon>
            <!-- <span>Start</span> -->
          </el-button>
          <el-button class="timer-button" type="primary" size="large" text @click="handlePause"
            :disabled="status.timerID == 0">
            <el-icon>
              <VideoPause />
            </el-icon>
            <!-- <span>Pause</span> -->
          </el-button>
          <el-button class="timer-button" type="primary" size="large" text @click="handleReset"
            :disabled="status.configDuration == status.currentDuration">
            <el-icon>
              <RefreshLeft />
            </el-icon>
            <!-- <span>Reset</span> -->
          </el-button>
          <el-button class="timer-button" type="primary" size="large" text @click="handleChange"
            :disabled="status.timerID != 0">
            <el-icon>
              <Tools />
            </el-icon>
            <!-- <span>Config</span> -->
          </el-button>
          <el-button class="timer-button" type="danger" size="large" :text="status.currentDuration != 0"
            @click="handleClose" :disabled="status.timerID != 0">
            <el-icon>
              <CircleCloseFilled />
            </el-icon>
            <!-- <span>Close</span> -->
          </el-button>
        </div>
      </div>

    </div>
  </ToolboxWindow>

</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import useJournalStore from '@/store/journal.js'
import ToolboxWindow from "@/components/ToolboxWindow/index.vue";
import convertMilliseconds from "./convertMilliseconds.js";

const interval = 37;

const journalStore = useJournalStore();
const status = computed(() => journalStore.timerStatus)

const duration = computed(() => convertMilliseconds(journalStore.timerStatus.currentDuration).toString(1))

const showConfig = ref(false)

const configContent = ref({
  hours: 0,
  minutes: 0,
  seconds: 0
})

const handleStart = () => {
  journalStore.timerStatus.timerID = setInterval(() => {
    journalStore.timerStatus.currentDuration -= interval;
    if (journalStore.timerStatus.currentDuration <= 0) {
      clearInterval(journalStore.timerStatus.timerID);
      journalStore.timerStatus.currentDuration = 0;
      journalStore.timerStatus.timerID = 0;
    }
  }, interval);
};

const handlePause = () => {
  if (journalStore.timerStatus.timerID != 0) {
    clearInterval(journalStore.timerStatus.timerID);
    journalStore.timerStatus.timerID = 0;
  }
}

const handleReset = () => {
  journalStore.timerStatus.currentDuration = journalStore.timerStatus.configDuration;
}


const handleClose = () => {
  journalStore.timerStatus.showMainWindow = false;
};

const handleCancel = () => { };

const handleChange = () => {
  let presetDuration = convertMilliseconds(journalStore.timerStatus.configDuration)
  configContent.value.hours = presetDuration.hours
  configContent.value.minutes = presetDuration.minutes
  configContent.value.seconds = presetDuration.seconds
  showConfig.value = true;
};

const handleSave = () => {
  let value = ((configContent.value.hours * 60 + configContent.value.minutes) * 60 + configContent.value.seconds) * 1000;
  if (value > 0) {
    journalStore.timerStatus.configDuration = value;
    journalStore.timerStatus.currentDuration = value;
    showConfig.value = false;
  }
};

</script>

<style scoped>
@import "@/styles/vibrate.css";

.timer-container {
  width: 100%;
}

.timer-main {
  width: 100%;
  text-align: center;
}

.timer-main-text {
  color: var(--el-text-color-primary);
  font-size: 3em;
  font-weight: bolder;
  width: 100%;
  padding: 18px 0 36px 0;
}

.finished {
  color: var(--el-color-danger);
}

.timer-config {
  width: 100%;
  padding: 32px;
}

.timer-config-form {
  color: var(--el-text-color-primary);
  font-size: 1.5em;
  font-weight: bolder;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.timer-button {
  padding: 8px 16px;
  font-size: 24px;
}
</style>